import React, { Component } from 'react';

class Button extends Component {

    constructor(props) {
        super(props);
    }

    handleFont(obj, data) {
        let fontArr = obj.font.split(' ');
        let arrLength = fontArr.length;
        data.fontSize = fontArr[arrLength - 2];
        data.fontFamily = fontArr[arrLength - 1];
        data.fontColor = obj.foreground;
        if (fontArr.length == 3) {
            data.fontWeight = fontArr[0];
        }
        else if (fontArr.length == 4) {
            data.fontWeight = fontArr[0];
            data.fontStyle = fontArr[1];
        }
        else if (fontArr.length == 5) {
            data.fontWeight = fontArr[0];
            data.fontStyle = fontArr[1];
            data.textDecoration = fontArr[2];
        }
    }

    render() {
        let obj = this.props.data;
        let layoutArr = obj.layout.split(',');
        let data = {};
        data.width = layoutArr[2];
        data.height = layoutArr[3];
        data.top = layoutArr[1];
        data.left = layoutArr[0];
        data.background = obj.background;
        data.text = obj.text;
        this.handleFont(obj, data);
        data.textAlign = obj.halign
        data.verticalAlign = obj.valign
        return (
            <button style={{
                background: data.background,
                lineHeight: `${data.height}px`,
                width: `${data.width}px`,
                height: `${data.height}px`,
                top: `${data.top}px`,
                left: `${data.left}px`,
                position: 'absolute',
                padding: 0,
                margin: 0
            }}>
                <p style={{
                    display: 'inline-block',
                    textAlign: data.textAlign,
                    verticalAlign: data.verticalAlign,
                    color: data.fontColor,
                    fontSize: data.fontSize,
                    fontFamily: data.fontFamily,
                    fontWeight: data.fontWeight
                }}>{data.text}</p>
            </button>
        );
    }
}

export default Button;
